<template>
    <div id="interviewplytwo">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="实时录音" name="first">

 <div class="row">
    <div class="toggle" @click="toggle">TOGGLE</div>

     <audio-recorder v-if="showRecorder"
      :upload-url="url+this.dataForm.invitationId"         
      filename="ninja"
      format="wav"
      :attempts="3"
      :time="2"
      :headers="headers"
      :before-recording="callback"
      :pause-recording="callback"
      :after-recording="callback"
      :select-record="callback"
      :before-upload="callback"
      :successful-upload="callback"
      :failed-upload="callback"
      :bit-rate="192"/>
    </div>







            </el-tab-pane>
            <el-tab-pane label="问题及方案" name="second">
            
           <el-form ref="form" :model="dataForm" label-width="80px">
               <el-form-item label="用户录音">
            <div v-for="(item,index) in soundList" :key="index">
           <audio-player     :src="item.soundRecording" />
       </div>
        </el-form-item>
            <el-form-item label="文字描述">
                <el-input type="textarea" v-model="dataForm.content"></el-input>
            </el-form-item>
          <!--  {{dataForm.subjectTypeTest}}

             <el-form-item label="存在问题">
                <el-cascader
                clearable
                placeholder="题目类型"
                @change="editCascader"
                :props="{ value: 'id',label:'typeName'}"
                style="width: 100%"
                v-model="dataForm.subjectTypeTest"
                :options="subjectTypeOptions"
                :show-all-levels="false"
                ></el-cascader>
            </el-form-item>-->
          
            <el-form-item label="问题类型">
            <el-select v-model="dataForm.typeId" placeholder="请选择"  >
              <el-option label="技术" :value="1"></el-option>
              <el-option label="人事" :value="2"></el-option>
              <el-option label="项目" :value="3"></el-option>
            </el-select>
          </el-form-item>
             <el-form-item label="涉及技术">
            <el-select
                v-model="projectTechnology"
                multiple
                
                style="width: 100%"
                placeholder="请选择项目技术"
                @visible-change="appendPush"
                @remove-tag="kkkk">
                <el-option
                v-for="item in projectTechnologyOptions"
                :key="item.name"
                :label="item.name"
                :value="item.name">
                </el-option>
            </el-select>
            <!--表格-->
            <span v-show="isShow">{{projectTechnology}}</span><br>
           <div v-if="this.projectTechnology!=null">
            <span v-for="(item,index) in this.projectTechnology" :key="index" >
              {{item}}：存在问题
              <el-input type="text"   v-model="dataForm.technologyall[index].stringValue" ></el-input>
              {{item}}：解决方案
              <el-input type="text"   v-model="dataForm.technologyall[index].sloveValue" ></el-input>
              </span>
            </div>
            </el-form-item>

             <el-form-item label="人事沟通" >
                <el-input type="textarea" v-model="dataForm.personnelContent"  placeholder="存在问题有："></el-input><br>
                 <el-input type="textarea" v-model="dataForm.personnelSlove"  placeholder="解决问题方案"></el-input>
            </el-form-item>
        
            <el-form-item label="项目描述" >
                <el-input type="textarea" v-model="dataForm.itemContent" placeholder="存在问题有："></el-input>
                <el-input type="textarea" v-model="dataForm.itemSlove" placeholder="解决方案有："></el-input>
            </el-form-item>
             <el-form-item label="注意内容">
                <el-input type="textarea" v-model="dataForm.attentionContent"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                <el-button>取消</el-button>
            </el-form-item>
            </el-form>
        
              
            </el-tab-pane>
           
            
        </el-tabs>

    </div>
</template>
<script>

export default {
    name:'Interviewreply',
    data(){
        return{
            activeName: 'first',
            soundList:[],
            id:null,
            uid:null,
            isShow:false,
            dataForm:{
                content:'',
                subjectTypeTest:'',
                typeId:null,
                technologyall:[],
                saveall:[],
              
                personnelContent:'',
                personnelSlove:'',
                itemContent:'',
                itemSlove:'',
                attentionContent:'',
                invitationId:null,
                uid:null
               
            },
            subjectTypeOptions:[],
            subjectTypeOptionsOne:[],
            projectTechnologyOptions: [],
            projectTechnology:[],
            result:[],
            resuleValue:'',
            a:null,
            sloveValue:'',
            qq:[],
            itemValue:'',
         url:`http://localhost:8868/api/interview/Oss/imagefile/`,
        mp3: 'https://pinxix-service.oss-cn-beijing.aliyuncs.com/2021-24-31ninja.mp3',
        showRecorder: true,
        headers: {
          'X-Custom-Header': 'some data'
        },
        }
    },
    methods:{
      findSound(){
        alert(this.dataForm.invitationId)
         this.$http({
          url: this.$http.adornUrl(`/interview/Oss/findbyid/${this.dataForm.invitationId}`),
          method: 'get'
        }).then(({data}) => {
          this.soundList = data
        })
      },
      appendPush(){
        if(this.qq.length<this.projectTechnology.length){
        this.qq = this.projectTechnology
        }
        console.log(this.qq)
         this.dataForm.technologyall.push({
           
        })  ;
      
      },
      kkkk(k){
        console.log(k)//name
        let a = []
        let b = []
        let c=0;
        for(const data of this.dataForm.technologyall){
          a.push(data.stringValue)
          b.push(data.sloveValue)
         c++;
        }
        
        this.dataForm.technologyall = []
        for(let i=0; i<this.qq.length; i++){
          if(this.qq[i]==k){
            console.log(this.projectTechnology[i-1])
          } else{
          this.dataForm.technologyall.push({stringValue:a[i],sloveValue:a[i]})
          }  
        }
        for(let i=0; i<this.qq.length; i++){
          if(this.qq[i]==k){
            this.qq.splice(i,1)
          }
        }

      },
      dataTranscoding(val){//数据转码

        this.result=[]
          for (let i=0;i<val.length;i++){
            for (let j=0;j<this.projectTechnologyOptions.length;j++){
                if (val[i]===this.projectTechnologyOptions[j].id){
                //this.resuleValue += this.projectTechnologyOptions[j].name + "、"
                  this.result.push(JSON.parse(JSON.stringify(this.projectTechnologyOptions[j].name)))
                }
            }
          }
          return this.result
        // return this.resuleValue.substring(0,resuleValue.length-1);
        },
        handleClick(tab, event) {
            console.log(tab, event);
         },
         editCascader(){
          for(var i=0;i<this.subjectTypeOptionsOne.length;i++){
            if(this.subjectTypeTest[this.subjectTypeTest.length-1]===this.subjectTypeOptionsOne[i].id){
              this.dataForm.subjectType=this.subjectTypeOptionsOne[i]
            }
          }
          
      },
        async findData(){//页面加载获取数据
        this.$http({
          url: this.$http.adornUrl('/hope/reply/subjecttype/alls'),
          method: 'get'
        }).then(({data}) => {
          this.subjectTypeOptions = this.editData(data)
        })
        this.$http({
          url: this.$http.adornUrl('/hope/reply/subjecttype/all'),
          method: 'get'
        }).then(({data}) => {
          this.subjectTypeOptionsOne = data
        })
         await this.$http({
        url: this.$http.adornUrl(`/hope/project/technology`),
        method: 'get'
      }).then(({data}) => {
        this.projectTechnologyOptions = data;
      })
   
      },
       editData(val){//处理流数据
        for (let i=0;i<val.length;i++){
          if (val[i].children.length === 0){
            val[i].children = undefined
          }else{
            this.editData(val[i].children)
          }
        }
        return val
      },
      onSubmit(){
                 
            this.$http({
              url: this.$http.adornUrl('/interview/interviewreply/save'),
              method: 'post',
              data: this.$http.adornData({
                'soundRecording': this.dataForm.soundRecording,
                'content': this.dataForm.content,
                'problem': JSON.stringify(this.dataForm.technologyall),
                'solve':JSON.stringify(this.projectTechnology),
                'personnelContent':this.dataForm.personnelContent+":"+this.dataForm.personnelSlove,
                'itemContent':this.dataForm.itemContent+":"+this.dataForm.itemSlove,
                'type':this.dataForm.typeId,
               
                'attentionContent': this.dataForm.attentionContent,
                'invitationId':this.dataForm.invitationId,
                'uid': this.dataForm.uid
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              }
      })
      },
      callback (msg) {
        console.debug('Event: ', msg)
      },
      toggle () {
        this.showRecorder = !this.showRecorder
      },
    
        
    },
    mounted(){
        this.findData();
       this.dataForm.invitationId= this.$route.query.id;
       this.dataForm.uid=this.$route.query.uid;
       this.findSound()
    }
}
</script>

<style lang="scss">
  .toggle {
    cursor: pointer;
    margin: 20px;
  }
</style>